<template>
	<view>
		<view class="evaluate" v-if="evaluate.total">
			<view class="header">
				<view class="title">
					评价
				</view>
				<view class="more" @click="goToMoreEvaluate()">
					更多评价
				</view>
			</view>
			
			<view class="list">
				<view class="item" v-for="(item,index) in evaluate.data" :key="index">
					<view class="avatar">
						<image :src="item.user_info.avatar" mode="widthFix"></image>
					</view>
					<view class="info">
						<view class="nickname">
							{{item.user_info.nickname}}
						</view>
						<view class="star">
							<EvaluateStar />
						</view>
						<view class="content">
							{{item.content}}
						</view>
						<view class="time">
							{{item.create_time_str}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import EvaluateStar from '../../../components/muu-evaluate-star/muu-evaluate-star.vue'
	export default {
		name: 'Evaluate',
		props:{
			type: {
				type: String,
				default: ''
			},
			typeId: {
				type: Number,
				default: 0
			}
		},
		components: {
			EvaluateStar,
		},
		data() {
			return {
				evaluate: {}
			}
		},
		created() {
			this.getEvaluate().then((res)=>{
				if(res.data.length > 0){
					this.$nextTick(() => {
						this.getEvaluateHeight();
					})
				}else{
					this.$emit("setEvaluateHeight", 0);
				}
			})
		},
		mounted() {
			
		},
		methods: {
			
			/**
			 * 获取高度
			 */
			getEvaluateHeight() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.evaluate').boundingClientRect(data => {
					console.log('evaluate', data)
					let height = data.height
					this.$emit("setEvaluateHeight", height);
				}).exec();
			},
			
			/**
			 * 获取课程评价列表2条
			 */
			getEvaluate: function(){
				let that = this
				let params = this.urlParams
				let data = {}
					data.action = 'list'
					data.type_id = this.typeId
					data.type = this.type
					data.rows = 2
				//获取评价列表数据
				//获取数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/evaluate'
					//#endif
					//#ifdef H5
					url = 'entry/site/evaluate'
					//#endif
				return new Promise((resolve, reject) => {
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								//console.log(res.data.data)
								that.evaluate = res.data.data
							}
							resolve(res.data.data)
						}
					})
				})
				
			},
			
			/**
			 * 路由至更多评价列表
			 * @param {Object} type
			 * @param {Object} type_id
			 */
			goToMoreEvaluate: function(){
				let type_id = this.typeId
				let type = this.type
				let urlParams = 'type_id='+type_id+'&type='+type
				let url = '../evaluate/list?' + urlParams
				//console.log(url)
				//指定跳转地址
				uni.navigateTo({
				    url: url
				});
			},
		}
	}
</script>

<style lang="scss">
	.evaluate {
		background-color: #fff;
		margin-bottom: 20rpx;
		padding: 20rpx;
		.header {
			display: flex;
			.title {
				flex: 1;
				font-size: 28rpx;
				font-weight: 600;
				color: #000;
				margin-bottom: 16rpx;
			}
			.more {
				width: 160rpx;
				font-size: 24rpx;
				text-align: right;
				color: #999;
			}
		}
		
		.list {
			.item {
				display: flex;
				border-bottom: 2rpx solid #f2f2f2;
				padding: 0 0 10rpx 0;
				margin-bottom: 10rpx;
				.avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					overflow: hidden;
					image {
						width: 120rpx;
						height: 120rpx;
					}
				}
				.info {
					padding-left: 20rpx;
					color: #666;
					.nickname {
						font-size: 24rpx;
						color: 24rpx;
					}
					.star {
						margin: 10rpx 0;
					}
					.content {
						font-size: 24rpx;
						color: 24rpx;
					}
					.time {
						font-size: 24rpx;
						color: 24rpx;
						color: #999;
					}
				}
				&:last-child {
					margin-bottom: 0;
					border-bottom: 0;
					padding-bottom: 0;
				}
			}
		}
	}
</style>
